To Do List

JavaScript重點

• 設置操作用變數

  let editElement; //用來暫存html內容
  let editFlag = false; //設定編輯功能的開關
  let editID = ""; //用來暫存要搜尋的ID
  

• 新增createListItem方法

  // 輸入參數為 要新增的物品id與名稱
  function createListItem(id, value) {
  
      //新增<article>元素在element中
      const element = document.createElement("article");
  
      //新增一個"data-id"屬性，並暫存於attr中
      let attr = document.createAttribute("data-id");
  
      //將attr的值設為匯入的id
      attr.value = id;
  
      //為element新增"data-id"的屬性，其值為輸入的id
      element.setAttributeNode(attr);
  
      //將元素新增"grocery-item"的class
      element.classList.add("grocery-item");
  
      //設定元素中的HTML碼
      element.innerHTML = `<p class="title">${value}</p>
                           <div class="btn-container">
                               <!-- edit btn -->
                               <button type="button" class="edit-btn">
                                   <i class="fas fa-edit"></i>
                               </button>
                               <!-- delete btn -->
                               <button type="button" class="delete-btn">
                                   <i class="fas fa-trash"></i>
                               </button>
                           </div>`;
  

  • 我們這裡暫停一下，先來看看目前element到底長什麼樣子
    • 以下為element完整的樣子 :

      這裡假設輸入ID為1600948607159，物品名稱為Pork

    <article class="grocery-item" data-id="XXX">
        <p class="title">YYYY</p>
        <div class="btn-container">
            <!-- edit btn -->
            <button type="button" class="edit-btn">
                <i class="fas fa-edit"></i>
            </button>
            <!-- delete btn -->
            <button type="button" class="delete-btn">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </article>
    

    • 而以下就是這段程式碼的樣子
      

    • 我們目前已經完成了物品article元素的設置，接下來要設置按鈕和其他的功能

  以下也為createListItem()中的程式碼

      //利用class="delete-btn"去抓取刪除按鈕
      const deleteBtn = element.querySelector(".delete-btn");
  
      //將刪除按鈕新增點擊事件，並執行deleteItem()方法
      deleteBtn.addEventListener("click", deleteItem);
  
      //利用class="edit-btn"去抓取編輯按鈕
      const editBtn = element.querySelector(".edit-btn");
  
      //將編輯按鈕新增點擊事件，並執行editItem()方法
      editBtn.addEventListener("click", editItem);
  
      //把element加進list<div>元素中
      list.appendChild(element);
  };
  

  • Document.createElement(tagname): 可以創立指定標籤名稱(TagName)的HTML元素
  • Document.createAttribute(name): 可以新增名為name一種屬性
  • Element.setAttributeNode(attribute): 為指定的Element新增Attribute
  • Element.appendChild(item): 將item元素塞入Element底下

引用與參考來源

1. Document.createElement()介紹
2. Document.createAttribute()介紹
3. Element.setAttributeNode()介紹
4. Element.appendChild()介紹